import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Alert } from 'antd';
import { connect } from 'dva';
import {abs} from '@/utils/utils';

const FormItem = Form.Item;
@Form.create()
class ReceivingOutlineGoodsComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            price: props.param.RefundFee
        }
    }

    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        const {price} = this.state;
        this.props.form.validateFields((err, values) => {
            if(!err) {
                dispatch({
                    type: 'orderRight/ComfirmOffReturn',
                    payload: {
                        Id: this.props.param.Id,
                        TransferWay: values.TransferWay,
                        FullName: values.FullName,
                        ReceiveAccount: values.ReceiveAccount,
                        SerialNumber: values.SerialNumber
                    },
                    callBack: {
                        success: res => {
                            if(res.Code===0) {
                                message.success('提交成功');
                                this.props.ok();
                            }
                        },
                        error: res => {
                            message.error(res.Msg)
                        }
                    }
                })
            }
        })
    }

    render() {
        const {loading1} = this.props;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 5,
              },
              wrapperCol: {
                span: 8,
              },
          }
        return (
            <Form onSubmit={this.handleSubmit}>
                <Alert
                    message="该笔订单通过“货到付款/线下支付”付款，系统只能标记退款记录，请您确认已与买家协商退款并填写退款信息"
                    type="warning"
                    showIcon
                    style={{margin: 24}}
                />
                <FormItem {...formItemLayout} label="退款方式" style={{marginBottom: 0}}>退货退款</FormItem>
                <FormItem {...formItemLayout} label="退款金额" style={{marginBottom: 0}}>￥{abs(this.props.param.RefundFee,2)}</FormItem>
                <FormItem {...formItemLayout} label="退货地址" style={{marginBottom: 8}}>{this.props.param.ReturnAddr}</FormItem>
                <FormItem
                {...formItemLayout}
                label="转账方式"
            >
                {getFieldDecorator('TransferWay',{
                    rules: [{required: false, message: '此项为必选项'}]
                })(
                    <Input />
                )}
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="收款人姓名"
            >
                {getFieldDecorator('FullName',{
                    rules: [{required: false, message: '此项为必选项'}]
                })(
                    <Input />
                )}
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="收款人账户"
            >
                {getFieldDecorator('ReceiveAccount',{
                    rules: [{required: false, message: '此项为必选项'}]
                })(
                    <Input />
                )}
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="支付流水号"
            >
                {getFieldDecorator('SerialNumber',{
                    rules: [{required: false, message: '此项为必选项'}]
                })(
                    <Input />
                )}
            </FormItem>
                <FormItem className="xkd-model-footBtn">
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={loading1}
                    >
                        确认收货退款
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const ReceivingOutlineGoods = createModalContainer(
    connect(({orderRight, global, loading}) =>({
        orderRight,
        loading1: loading.effects['orderRight/ComfirmOffReturn'],
    }))(ReceivingOutlineGoodsComponent),
    true,
    true
);

export default ReceivingOutlineGoods;